<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my-style1 {
            width: 200px;
            height: 100px;
            background: orange;
        }
        .my-style2 {
            border-radius: 10px;
        }
        .my-style3 {
            width: 200px;
            height: 100px;
            background: black;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-11">
        <!-- 如果 message1 为 true, 就加载 my-style1，如果 message2 为 true, 就加载 my-style2  -->
        <div :class="{'my-style1': message1, 'my-style2' : message2}">
        </div><hr />
        <!-- 为 class 属性加载多个样式名 -->
        <div :class="[booleanValue1, booleanValue2]">
        </div><hr />
        <!-- 如果 message3 为 true, 则 class = 'my-style3',否则 class = 'my-style1'
        如果在三目运算中使用样式名则需要加单引号，不加单引号则表示从 data 变量中获取样式名
        -->
        <div :class="[message3 ? 'my-style3' : 'my-style1']">
        </div>
        <div :class="[message1 ? booleanValue1 : booleanValue3]"></div>
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-11',
            data: {
                message1: true,
                message2: true,
                message3: true,
                booleanValue1: "my-style1",
                booleanValue2: "my-style2",
                booleanValue3: "my-style3"
            }
        })

    </script>
</body>
</html>